<template>
	<!--  在售商品-->
	<view class="infoall" data-type="0" >
		<view class="infocard" v-if="details.thingType === 0 || details.thingType === 1">
			<view class="Cname" @click="getcardinfo(details.thingUUId)">
				<view class="name">{{details.varieties}}</view>
				<view class="price">{{details.thingPrice}}元/斤</view>
			</view>
			<!-- 图标 -->
			<view class="Cicon">
				<view class="exicon" v-if="details.thingType === 1">
					<u-icon name="../../../static/icon/collect/resale.svg" size="48" label="预售" label-pos="right"
						label-size="24" label-color="rgba(255, 141, 26, 1)">
					</u-icon>
				</view>
				<u-icon :name="'heart-fill'" size="50" label-pos="right" label-size="25" @click="cancelcollect()"
					:style="{'color':'rgba(255, 87, 51, 1)'}" class="icon"></u-icon>
			</view>
			<!-- 上货时间 -->
			<view class="Ctime" @click="getcardinfo(details.thingUUId)">{{details.colTime}}发货</view>
			<view class="weight" @click="getcardinfo(details.thingUUId)">总重量：{{details.weight}}kg</view>
			<!-- 图片 -->
			<view class="image" @click="getcardinfo(details.thingUUId)">
				<u-lazy-load threshold="-250" border-radius="10" :image="details.imgUrl">
				</u-lazy-load>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}

		},
		props: ['details'],
		methods: {
			getcardinfo(uuid) {
				console.log(uuid);
				let purl = '../../subpages/Details/product_details?uuid=' + uuid;
				this.goto(purl)
			},
			goto(url) {
				uni.navigateTo({
					url: url,
					animationType: 'slide-in-right',
					animationDuration: 1000
				})
			},
		},
	}
</script>

<style>
	.infoall {
		background-color: #ffffff;
		position: relative;
	}

	.infocard {
		transition: all 0.2s;
		margin-top: 10px;
		display: grid;
		width: 100vw;
		height: auto;
		grid-row-gap: 10px;
		grid-column-gap: 5px;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas: "image Cname Cicon"
			"image Ctime Ctime "
			"image weight . "
	}

	.infocard[data-type="0"] {
		transform: translate3d(0, 0, 0);
	}

	.infocard[data-type="1"] {
		transform: translate3d(-64px, 0, 0);
	}

	.Cname {
		white-space: nowrap;
		text-overflow: ellipsis;
		/*显示省略符号来代表被修剪的文本*/
		overflow: hidden;
		grid-area: Cname;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "name price";
	}

	.Cicon {
		grid-area: Cicon;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "extion icon"
	}

	.price {
		white-space: nowrap;
		text-overflow: ellipsis;
		/*显示省略符号来代表被修剪的文本*/
		overflow: hidden;
		grid-area: price;
		color: rgba(255, 87, 51, 1);
		font-size: 14px;
	}

	.name {
		grid-area: name;
		font-size: 16px;
	}

	.weight {
		grid-area: weight;
	}

	.Ctime {
		/* 		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden; */
		grid-area: Ctime;
		font-size: 14px;
	}

	.exicon {
		grid-area: extion
	}

	.icon {
		z-index: 999;
		grid-area: icon
	}

	.image {
		grid-area: image
	}
</style>
